<template>
  <el-card v-show="isShowList === 0">
    <el-button
      type="primary"
      icon="el-icon-plus"
      :disabled="!category3Id"
      @click="$emit('update:isShowList', 1)"
    >添加SPU</el-button>
    <el-table
      v-loading="loading"
      class="spu-table"
      :data="spuList"
      border
      style="width: 100%"
    >
      <el-table-column type="index" label="序号" width="50" />
      <el-table-column label="SPU名称" prop="spuName" />
      <el-table-column label="SPU描述" prop="description" />
      <el-table-column label="操作">
        <template v-slot="{ row, $index }">
          <el-tooltip content="添加SKU" placement="bottom" effect="light">
            <el-button
              type="primary"
              size="mini"
              icon="el-icon-plus"
              @click="showAddSku(row)"
            />
          </el-tooltip>
          <el-tooltip content="修改SPU" placement="bottom" effect="light">
            <el-button
              type="warning"
              size="mini"
              icon="el-icon-edit"
              @click="showUpdateSpu(row)"
            />
          </el-tooltip>
          <el-tooltip content="查看SKU列表" placement="bottom" effect="light">
            <el-button
              type="info"
              size="mini"
              icon="el-icon-info"
              @click="
                $bus.$emit('receiveVisible', {
                  spuId: row.id,
                  spuName: row.spuName,
                })
              "
            />
          </el-tooltip>

          <!-- element-ui文档写错了 onConfirm -->
          <el-tooltip content="删除SPU" placement="bottom" effect="light">
            <el-popconfirm class="spu-pop" :title="`确定要删除 xxx 属性值吗？`">
              <!-- 必须使用具名插槽 -->
              <el-button
                slot="reference"
                type="danger"
                size="mini"
                icon="el-icon-delete"
              />
            </el-popconfirm>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      :current-page="currentPage"
      :page-sizes="[3, 6, 9, 12]"
      :page-size="pageSize"
      layout="prev, pager, next, jumper, sizes, total"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </el-card>
</template>

<script>
import { mapState } from 'vuex'
import { reqGetSpuList } from '@api/spu'

export default {
  name: 'SpuList',
  props: ['isShowList'],
  data() {
    return {
      spuList: [
        // {
        //   id: 838,
        //   spuName: "Sony/索尼A7S3",
        //   description:
        //     "新品 Sony/索尼A7S3全画幅微单相机A7SM3单机4K国行 ILCE-7S3现货 A7S3现货+大师70-200F2.8国行",
        //   category3Id: 178,
        //   tmId: 6533, // 品牌id
        //   spuSaleAttrList: null,
        //   spuImageList: null,
        // },
      ],
      total: 1,
      currentPage: 1,
      pageSize: 3,
      loading: false
    }
  },
  // mounted() {
  //   console.log(this.$listeners);
  // },
  computed: {
    ...mapState({
      category3Id: (state) => state.category.category3Id
    })
  },
  watch: {
    category3Id(category3Id) {
      if (!category3Id) {
        this.spuList = []
        this.total = 0
        this.currentPage = 1
        this.pageSize = 3
        return
      }
      this.getSpuList(this.currentPage, this.pageSize)
    },
    isShowList(isShowList) {
      if (isShowList) {
        this.getSpuList(this.currentPage, this.pageSize)
      }
    }
  },
  methods: {
    showAddSku(spu) {
      this.$bus.$emit('receiveSpuDataToSku', spu)
      this.$emit('update:isShowList', 2)
    },
    showUpdateSpu(spu) {
      this.$bus.$emit('receiveSpuData', spu)
      this.$emit('update:isShowList', 1)
    },
    async getSpuList(currentPage, pageSize) {
      try {
        this.loading = true
        const res = await reqGetSpuList({
          page: currentPage,
          limit: pageSize,
          category3Id: this.category3Id
        })
        this.total = res.data.total
        this.spuList = res.data.records
      } catch {
        this.$message.error('获取SPU列表失败')
      } finally {
        this.loading = false
      }
    },
    handleCurrentChange(currentPage) {
      this.currentPage = currentPage
      this.getSpuList(currentPage, this.pageSize)
    },
    handleSizeChange(pageSize) {
      this.pageSize = pageSize
      this.getSpuList(this.currentPage, pageSize)
    }
  }
}
</script>

<style lang="sass" scoped>
.spu-table
  margin: 10px 0
.spu-pop
  margin-left: 10px
</style>
